<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假系统登录</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="login.css">
</head>
<body>
<!-- 动态背景 -->
<div class="area">
    <ul class="circles">
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>

<!-- 波浪动画 -->
<div class="waves-container">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
</div>

<div class="box">
    <div class="login-container">
        <div class="login-header">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <h2>请假系统登录</h2>
        </div>

        <form action="login" method="post">
            <div class="form-group">
                <label for="username">用户名：</label>
                <div class="input-box">
                    <i class="fas fa-user"></i>
                    <input type="text"
                           id="username"
                           name="username"
                           value="admin"
                           placeholder="请输入账号"
                           required>
                    <span class="input-focus-effect"></span>
                </div>
            </div>

            <div class="form-group">
                <label for="password">密码：</label>
                <div class="input-box">
                    <i class="fas fa-lock"></i>
                    <input type="password"
                           id="password"
                           name="password"
                           value="123456"
                           placeholder="请输入密码"
                           required>
                    <i class="fas fa-eye toggle-password"></i>
                    <span class="input-focus-effect"></span>
                </div>
            </div>

            <div class="form-group">
                <label for="role">用户类型：</label>
                <div class="input-box select-box">
                    <i class="fas fa-users"></i>
                    <select id="role" name="role" required>
                        <option value="">请选择用户类型</option>
                        <option value="admin">管理员</option>
                        <option value="instructor">辅导员</option>
                        <option value="student">学生</option>
                    </select>
                    <i class="fas fa-chevron-down arrow"></i>
                    <span class="input-focus-effect"></span>
                </div>
            </div>

            <!-- 错误信息显示 -->
            <% String error = request.getParameter("error");
                if (error != null && !error.isEmpty()) { %>
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i>
                <%= error %>
            </div>
            <% } %>

            <button type="submit" class="submit-btn">
                <span>登录</span>
                <i class="fas fa-arrow-right"></i>
            </button>

            <div class="form-footer">
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 密码显示切换
        $('.toggle-password').click(function() {
            const input = $(this).siblings('input');
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                $(this).removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                input.attr('type', 'password');
                $(this).removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });

        // 输入框焦点效果
        $('.input-box input, .input-box select').focus(function() {
            $(this).parent('.input-box').addClass('focused');
        }).blur(function() {
            if (!$(this).val()) {
                $(this).parent('.input-box').removeClass('focused');
            }
        });

        // 如果输入框有值，添加focused类
        $('.input-box input, .input-box select').each(function() {
            if ($(this).val()) {
                $(this).parent('.input-box').addClass('focused');
            }
        });

        // 提交按钮动画
        $('.submit-btn').click(function() {
            $(this).addClass('loading');
        });

        // 背景动画
        function animateBackground() {
            $('.circles li').each(function(index) {
                const delay = index * 0.2;
                $(this).css('animation-delay', `${delay}s`);
            });
        }
        animateBackground();
    });
</script>
</body>
</html>